<style>
  .container{
    border: 1px solid red;
  }
</style>
<template>
  <h1>首页</h1>
  <el-button type="primary" @click="hanlderDashboard">主控台</el-button>
  <el-button type="success" @click="hanlderUser">用户管理</el-button>
  <el-button type="warning" @click="logout">退出</el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="date" label="Date" width="180" />
      <el-table-column prop="name" label="Name" width="180" />
      <el-table-column prop="address" label="Address" />
    </el-table>
  <div class="container">
    父子路由:
    <router-view></router-view>
  </div>
</template>

<script setup>
  import {useRouter} from "vue-router";
  const tableData = [
    {
      date: '2016-05-03',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      address: 'No. 189, Grove St, Los Angeles',
    },
  ]

  const router = useRouter();

  //退出
  const logout = ()=>{
    router.push('/login');
  }
  //主控台
  const hanlderDashboard = ()=>{
    router.push("/dashboard");
  }
  //用户管理
  const hanlderUser = ()=>{
    router.push("/user");
  }
</script>